<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-添加和删除一行元素</title>
    <script src="../js/jquery-3.6.0.js"></script>
    <script>
        $(function () {
            // 按钮绑定事件
            $("button").click(function () {
                // 获取所有输入的值
                let id = $("input[name=id]").val();
                let uname = $("input[name=uname]").val();
                let sex = $("input[name=sex]:checked").val();
                let sal = $("input[name=sal]").val();
                // 拼接成字符串
                let str="<tr align='center'>\n" +
                    "        <th>"+id+"</th>\n" +
                    "        <th>"+uname+"</th>\n" +
                    "        <th>"+sex+"</th>\n" +
                    "        <th>"+sal+"</th>\n" +
                    "        <th><button onclick='del()'>删除</button></th>\n" +
                    "    </tr>"
                $("thead").append(str);
                // 清空所有输入框的值
                $("input[name=id],input[name=uname],input[name=sal]").val("");
            });
        })
        function del() {
            // 通过事件源的父对象的父对象拿到tr对象并调用remove()方法
            $(event.target).parent().parent().remove();
        }
    </script>
</head>
<body>
<body>
<form action="javascript:;" name="frm">
    ID:<input type="text" name="id">
    NAME:<input type="text" name="uname">
    SEX:
    <input type="radio" name="sex" value="男" checked>男
    <input type="radio" name="sex" value="女">女
    SAL:<input type="text" name="sal">
    <button>添加</button>
    <input type="reset" value="重置">
</form>
<hr>
<table border="1px" width="1200px">
    <caption><h3>用户列表</h3></caption>
    <thead>
    <tr>
        <th>ID</th>
        <th>NAME</th>
        <th>SEX</th>
        <th>SAL</th>
        <th>操作</th>
    </tr>
    </thead>
</table>
</body>
</body>
</html>